<template>
  <div style="padding: 20px 20px">
    <div>
      <el-row>
        <el-col :span="4">
          <span>期间：</span>
          <el-date-picker
            size="small"
            v-model="currentDate"
            type="month"
            @change="handlePeriodChange"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="10" v-if="!settlement.closed">
          <el-button
            type="primary"
            @click="() => handleSettlement(true)"
            size="small"
            >结账</el-button
          >
        </el-col>
        <el-col :span="10" v-if="settlement.closed">
          <el-button
            type="warning"
            @click="() => handleSettlement(false)"
            size="small"
            >反结账</el-button
          >
        </el-col>
      </el-row>
    </div>
    <div style="padding-top: 20px">
      <el-row>
        <el-col :span="6" v-for="(item, index) in items" :key="index">
          <el-card class="box-card" style="width: 380px; margin-top: 20px">
            <div slot="header" class="clearfix">
              <span>{{ item.name }}</span>
              <span style="float: right">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <el-link type="primary" :underline="false">操作</el-link>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-show="!matchItemResult(item).journalApproved"
                      @click.native="() => handleMeasure(item)"
                      >测算</el-dropdown-item
                    >
                    <el-dropdown-item
                      v-show="matchItemResult(item).journalNumber"
                      @click.native="() => handleViewJournal(item)"
                      >查看凭证</el-dropdown-item
                    >
                    <el-dropdown-item
                      v-show="
                        !matchItemResult(item).journalNumber &&
                        matchItemResult(item).itemId &&
                        matchItemResult(item).needProcess
                      "
                      @click.native="() => handleCreateJournal(item)"
                      >创建凭证</el-dropdown-item
                    >
                    <el-dropdown-item
                      v-show="
                        matchItemResult(item).journalApproved == false &&
                        matchItemResult(item).journalNumber
                      "
                      @click.native="() => handleDeleteJournal(item)"
                      >删除凭证</el-dropdown-item
                    >
                    <el-dropdown-item
                      v-show="
                        matchItemResult(item).journalApproved == false &&
                        matchItemResult(item).journalNumber
                      "
                      @click.native="() => handleApproveJournal(item)"
                      >审核凭证</el-dropdown-item
                    >
                    <el-dropdown-item
                      v-show="matchItemResult(item).journalApproved == true"
                      @click.native="() => handleUnApproveJournal(item)"
                      >反审核凭证</el-dropdown-item
                    >
                    <el-dropdown-item
                      @click.native="() => handleRefreshItem(item)"
                      >刷新</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </div>
            <div class="text item" style="min-height: 160px; max-height: 160px">
              <div v-if="!matchItemResult(item).itemId">
                <span> 未处理 </span>
              </div>
              <div v-if="matchItemResult(item).itemId">
                <el-row :gutter="20" class="item-result-row">
                  <el-col :span="12"><span>测算金额：</span></el-col>
                  <el-col :span="12" class="item-result">{{
                    matchItemResult(item).measureValue | money
                  }}</el-col>
                </el-row>
                <el-row :gutter="20" class="item-result-row">
                  <el-col :span="12"><span>凭证：</span></el-col>
                  <el-col :span="12" class="item-result"
                    ><span>{{
                      matchItemResult(item).journalNumber
                    }}</span></el-col
                  >
                </el-row>
                <el-row :gutter="20" class="item-result-row">
                  <el-col :span="12"><span>凭证金额：</span></el-col>
                  <el-col :span="12" class="item-result"
                    ><span>{{
                      matchItemResult(item).journalNumber
                    }}</span></el-col
                  >
                </el-row>
                <el-row
                  :gutter="20"
                  v-for="(resultItem, loop) in matchItemResult(item).items"
                  :key="loop"
                  class="item-result-row"
                >
                  <el-col :span="12"
                    ><span>{{ resultItem.name }}:</span></el-col
                  >
                  <el-col :span="12" class="item-result"
                    ><span v-if="!resultItem.needEdit">{{
                      resultItem.value
                    }}</span>
                    <span v-if="resultItem.needEdit"
                      ><el-input
                        v-model="resultItem.value"
                        class="item-result-edit"
                        style="width: 90%"
                      ></el-input
                      >%</span
                    >
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { getSettlements } from "@/api/settlement";
import {
  getItems,
  getItemResults,
  measureItem,
  getItemResult,
} from "@/api/endperiodprocess";

export default {
  data() {
    return {
      currentDate: null,
      settlement: {},
      items: [],
      itemResult: [],
    };
  },
  methods: {
    getData() {
      this.getSettlement();
      this.getItems();
      this.getItemResults();
    },
    getSettlement() {
      getSettlements({ period: this.currentPeriod }).then((res) => {
        this.settlement =
          res && res.length > 0
            ? res[0]
            : { period: this.org.activationDate, close: false };
      });
    },
    getItems() {
      this.items = [];
      getItems({
        pageIndex: 1,
        pageSize: 1000,
        period: this.currentPeriod,
      }).then((res) => {
        res = res || { totalCount: 0, items: [] };
        this.items = res.items;
      });
    },
    getItemResults() {
      this.itemResult = [];
      getItemResults({ includeDetail: true }).then((res) => {
        this.itemResult = res || [];
      });
    },
    matchItemResult(item) {
      if (!item) return {};

      let result = this.itemResult.find((e) => e.itemId == item.id);

      return result || {};
    },
    handlePeriodChange() {
      this.getData();
    },
    handleMeasure(item) {
      measureItem({ itemId: item.id, period: this.currentPeriod }).then(
        (res) => {
          this.setItemResult(item, res);
        }
      );
    },

    handleSettlement(close) {},
    handleRefreshItem(item) {
      getItemResult(item.id).then((res) => {
        this.setItemResult(item, res);
      });
    },
    setItemResult(item, result) {
      let match = this.itemResult.find((x) => x.itemId == item.id);

      if (!match) {
        if (result) this.itemResult.push(result);
        return;
      }

      if (!result)
        this.itemResult = this.itemResult.filter((e) => {
          return e.id != match.id;
        });
      else match = result;
    },
  },
  mounted() {
    this.currentDate = new Date(Date.now());
    this.getData();
  },
  computed: {
    org() {
      return this.$store.state.organization.data;
    },
    currentPeriod() {
      if (this.currentDate) return this.currentDate.toPeriod();
    },
  },
};
</script>
<style scoped>
.item-result {
  text-align: right;
}
.item-result-row {
  padding: 3px;
  font-size: 12px;
}
</style>
<style>
.item-result-edit .el-input__inner {
  text-align: right;
}
</style>
